<template>
    <el-row :gutter="0" class="min-h-screen bg-indigo-500">
        <el-col :md="12" :lg="16" :offset="0" class="flex items-center justify-center bg" >
            <div class="px-10 sm:px-30" >
                <div class="sm:text-4xl xl:text-5xl font-bold text-light-50 leading-tight mb-6">

                    <div style="color:gray">  登录页面</div>  
                </div>
            </div>
        </el-col>
        <el-col :md="12" :lg="8" :offset="0" class="bg-light-50 flex flex-col items-center justify-center">
            <h2 class="mt-6 text-3xl font-bold text-gray-900" style="color:gray">
                {{login?'登录':'注册'}}</h2>  
          
            <div class="flex items-center justify-center space-x-2 mt-5 mb-8">
                <span class="h-px w-16 bg-gray-200"></span>
                <span class="text-gray-300 font-normal">账号密码登录</span>
                <span class="h-px w-16 bg-gray-200"></span>
            </div>
            <el-form :model="form" :rules="rules" ref="formRef" style="width:250px;" :inline="false" size="default">
                <el-form-item prop="name">
                    <el-input v-model="form.name" placeholder="请输入账号">
                        <template #prefix>
                            <el-icon class="el-input__icon"><user /></el-icon>
                        </template>
</el-input>
</el-form-item>
<el-form-item prop="password">
    <el-input v-model="form.password" placeholder="请输入密码" show-password type="password">
        <template #prefix>
                            <el-icon class="el-input__icon"><lock /></el-icon>
                        </template>
    </el-input>
</el-form-item>
<el-form-item prop="phone" v-if="!login">
    <el-input placeholder="请输入手机号" v-model="form.phone"></el-input>
</el-form-item>
<el-form-item prop="sex" v-if="!login">
    <el-select v-model="form.sex" placeholder="请选择性别" style="width:100%">
        <el-option label="男" value="1"></el-option>
        <el-option label="女" value="2"></el-option>
    </el-select>
</el-form-item>
<el-form-item>

    <div style="cursor: pointer;" @click="change(false)" v-if="login">去注册</div>
    <div style="cursor: pointer;" @click="change(true)" v-else>去登录</div>
    <el-button round color="#626aef" style="width:250px;color: white;" @click="submit" :loading="loading">
        {{login?'登 录':'注 册'}}
    </el-button>
</el-form-item>
</el-form>

</el-col>
</el-row>
</template>
<script setup>
    import {
        reg,
        logging,
        getUSerInfo
    } from "~/api/xm.js"
    import {
        ElMessage
    } from 'element-plus'
    import {
        ref,
        reactive,
        onMounted
    } from 'vue'
    import {
        useRouter
    } from 'vue-router'
    import {
        useStore
    } from 'vuex'
    import {
        toast
    } from '~/composables/util.js'
    import {
        setToken
    } from '~/composables/auth'
    const login = ref(true)
    const router = useRouter()
    const formRef = ref(null)
    const bumenList = ref(null)
    const form = reactive({
        name: "",
        password: "",
        phone: "",
        sex: "",
        sex: "",
    })
    onMounted(() => {})

    function change(e) {
        login.value = e
        form.name = '',
            form.phone = '',
            form.sex = '',
            form.password = ''
    }
    const validatePass = (rule, value, callback) => {
        console.log(value);
        if (value === '') {
            callback(new Error('手机号不能为空'))
        } else {
            let reg = /^1[3-9]\d{9}$/
            if (reg.test(value)) {
                callback()

            }
            callback(new Error('手机号格式不正确'))
        }
    }
    const rules = {
        name: [{
            required: true,
            message: '账号不能为空',
            trigger: 'change',
        }],
        password: [{
            required: true,
            message: '密码不能为空',
            trigger: 'change',
        }],
        phone: [{
            required: true,
            validator: validatePass,
            trigger: 'change',
        }],
        sex: [{
            required: true,
            message: '性别不能为空',
            trigger: 'change',
        }],
    }
    const loading = ref(false)
    const store = useStore()
    const submit = (e) => {
        formRef.value.validate((valid) => {
            if (valid) {
                if (login.value) {
                    logging(form).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            localStorage.setItem("token", res.data)
                            ElMessage({
                                message: '登录成功',
                                type: 'success',
                            })
                            getUSerInfo().then(res => {
                                if (res.data.type == 2) {
                                    router.push('/chongwujiankang');
                                } else {
                                    router.push('/chongwu');
                                }
                            })

                        } else {
                            ElMessage({
                                message: res.msg,
                                type: 'warning',
                            })
                        }
                    })



                } else {
                    form.type = 1
                    reg(form).then(res => {
                        if (res.code == 200) {
                            ElMessage({
                                message: '注册成功一秒后跳转至登录',
                                type: 'success',
                            })
                            setTimeout(() => {
                                change(true)
                            }, 1000)
                        } else {
                            ElMessage({
                                message: res.msg,
                                type: 'warning',
                            })
                        }
                    })


                }
                console.log(login.value, "!1");
            }
        })
    }
</script>
<style scoped>
    .bg {
        background-image: url('../../assets/43305c7e035a62f8c65de0b683a2034.png');
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
</style>